<template>
	<div class="setbackground">
		<div class="login">
			<p>Login</p>
			<el-form :model="logindata" ref="logindata" label-width="100px" class="demo-ruleForm" status-icon>
			  <el-form-item
			    label="账号"
			    prop="username"
			    :rules="[
			      { required: true, message: '账号不能为空'},
			    ]"
			  >
			    <el-input type="test" v-model="logindata.username" prefix-icon = "el-icon-user ft-gray"></el-input>
			  </el-form-item>
			  <el-form-item
			    label="密码"
			    prop="password"
			    :rules="[
			      { required: true, message: '密码不能为空'},
			    ]"
			  >
			    <el-input type="password" v-model="logindata.password" prefix-icon="el-icon-lock ft-gray" show-password></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="login">登录</el-button>
			    <el-button @click="signup">注册</el-button>
				<el-button type="text" @click="forgetpass">忘记密码</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				logindata: {
				          username: '',
						  password: '',
				        },
				
			}
		},
		methods: {
			login() {
				
				this.$axios.post("http://localhost:8848/user/login", this.$qs.stringify({
					username: this.logindata.username,
					password: this.logindata.password
				}))
					.then( (resp) => {
						var u = resp.data;
						
						if (u == 1) {
							this.$router.push("/menu/" + this.logindata.username)
							this.$message.success("登陆成功")
						}
						else if (u == 0) {
							this.$message.error("登录失败")
						}
						else {
							this.$message.error("错误")
						}
					})
					 .catch( (err)=>{
					 	console.log("error=", err);
					 } )
			},
			signup() {
				this.$router.push("/signup")
			},
			forgetpass() {
				this.$router.push('/checkuser')
			}
		},
		created() { //登陆快捷键enter
			let that = this
			document.onkeydown = function(e) {
				var key = window.event.keyCode;
				
				if (key == 13) {
					that.login();
				}
			}
			
		}
	}
</script>

<style>
	.background {
		width: 100%;
		height: 100%;
	}
	
	
	.login {
		position: absolute;
		top: 50%;
		margin-top: -200px;
		left: 50%;
		margin-left: -200px;
		background-color: whitesmoke;
		width: 500px;
		height: 400px;
		border-radius: 25px;
		text-align: center;
		padding: 5px 40px;
		box-sizing: border-box;
		background: rgba(252,252,252,0.5);
	}
	
	/* .login {
		width: 500px;
		margin-top: 100px;
		margin-left: 500px;
	} */
	
	p {
		font-size: 42px;
		font-weight: 600;
	}
</style>
